.#{$ns}Form-groupColumn {
    margin-bottom: $gap-sm;
}

@include media-breakpoint-up(md) {
    .#{$ns}Form-group {
        margin-bottom: $Form-item-gap;

        .#{$ns}Form-value > & {
            margin-bottom: $Form-input-marginBottom;
        }

        &--hor {
            display: flex;
            flex-wrap: nowrap;
            margin-left: -$Form-group-gutterWidth / 2;
            margin-right: -$Form-group-gutterWidth / 2;
            align-items: flex-start;

            &.v-middle {
                align-items: center;
            }

            &.v-bottom {
                align-items: flex-end;
            }

            > * {
                padding-left: $Form-group-gutterWidth / 2;
                padding-right: $Form-group-gutterWidth / 2;
            }

            > .#{$ns}Form-item--inline {
                margin-right: 0;
            }

            > .#{$ns}Form-item,
            > div > .#{$ns}Form-item {
                margin-bottom: 0;
            }

            .#{$ns}Form-input > .#{$ns}Form-group {
                margin-bottom: 0;
            }
        }

        &--lg {
            margin-left: -$Form-group--lg-gutterWidth / 2;
            margin-right: -$Form-group--lg-gutterWidth / 2;

            > * {
                padding-left: $Form-group--lg-gutterWidth / 2;
                padding-right: $Form-group--lg-gutterWidth / 2;
            }
        }

        &--md {
            margin-left: -$Form-group--md-gutterWidth / 2;
            margin-right: -$Form-group--md-gutterWidth / 2;

            > * {
                padding-left: $Form-group--md-gutterWidth / 2;
                padding-right: $Form-group--md-gutterWidth / 2;
            }
        }

        &--sm {
            margin-left: -$Form-group--sm-gutterWidth / 2;
            margin-right: -$Form-group--sm-gutterWidth / 2;

            > * {
                padding-left: $Form-group--sm-gutterWidth / 2;
                padding-right: $Form-group--sm-gutterWidth / 2;
            }
        }

        &--xs {
            margin-left: -$Form-group--xs-gutterWidth / 2;
            margin-right: -$Form-group--xs-gutterWidth / 2;

            > * {
                padding-left: $Form-group--xs-gutterWidth / 2;
                padding-right: $Form-group--xs-gutterWidth / 2;
            }
        }
    }

    .#{$ns}Form-groupColumn {
        flex-basis: 0;
        flex-grow: 1;
        width: 0;
        max-width: 100%;
        margin-bottom: 0;
    }

    @for $i from (1) through $Form--horizontal-columns {
        .#{$ns}Form-groupColumn--#{$i} {
            flex: 0 0 percentage($i / $Form--horizontal-columns);
            max-width: percentage($i / $Form--horizontal-columns);
            min-height: 1px;
        }
    }
}
